<template>
    <div>
       <div>
          <header>
            <el-row type="flex" class="row-bg" justify="space-between">
              <el-col :span="8">
                <div>
                </div>
              </el-col>
              <el-col :span="8">
                <div style="color: #fff; font-size: 20px;text-align: center;width: 100%;">
                  活动空间
                </div>
              </el-col>
              <el-col :span="8">
                <div style="padding-right: 5px;">
                  <el-button type="text" class="car-btn1" @click="isdelete = !isdelete" v-show="isdelete == false">管理</el-button>
                  <el-button type="text" class="car-btn1" @click="isdelete = !isdelete" v-show="isdelete == true">完成</el-button>
                </div>
              </el-col>
            </el-row>
          </header>
          <div style="height: 40.8px"></div>
        </div>
      <div>
            <el-card class="box-card" v-for="item in carList" :key="item.userId">
              <div class="username">
                {{item.nickName}}
              </div>
              <div class="demo-fit">
                <div style="margin-right: 10px;">
                  <input type="checkbox" :value="item.activityId" v-model="checked">
                </div>
                <router-link :to="'/detail/'+item.activityId" style="text-decoration: none;">
                  <el-avatar shape="square" :size="60" :fit="fits" :src="item.activityImg"></el-avatar>
                </router-link>
                <div class="activity">
                  <router-link :to="'/detail/'+item.activityId" style="text-decoration: none;">
                    <div class="activity-name">
                      {{item.activityName}}
                    </div>
                  </router-link>
                  <div class="count-num">
                    <el-input-number 
                    v-model="item.joinNumber" 
                    @change="handleChange" 
                    :min="1" 
                    :max="item.resNumber" 
                    size="small"
                    label="描述文字"
                    >
                    </el-input-number>
                  </div>
                </div>
              </div>
            </el-card>
      </div>
      <div>
        <transition name="el-zoom-in-bottom">
          <div v-show="show3" class="tojoin">
            <div style="margin: 10px 20px 5px 20px;">
              <p style="text-align: center;margin: 10px 0 15px 0;font-size: 18px;">请填写您的相关信息</p>
              <el-form label-position="top" label-width="80px" :model="form" :rules="rules" ref="form" class="demo-ruleForm">
                <el-form-item label="参与者姓名" prop="name">
                  <el-input v-model="form.name" placeholder="填一人即可"></el-input>
                </el-form-item>
                <el-form-item label="参与者联系方式" prop="telNumber">
                  <el-input v-model="form.telNumber" placeholder="填一个即可"></el-input>
                </el-form-item>
                <el-form-item style="text-align: center;">
                  <el-button type="primary" @click="submitForm('form')">提交</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </transition>
        <transition name="el-zoom-in-bottom">
          <div v-show="show3" class="tocarmask" @click="show3 = false"></div>
        </transition>
        <footer  v-show="!show3">
          <div style="height: 41px;border-bottom: solid 1px #eee;display: flex; align-items: center;">
            <div style="padding: 0 0 0 15px; width: 100px;">
              <input type="checkbox" v-model="checkAll"><span style="color: #409EFF;">全选({{checkedCount}})</span>
            </div>
            <div style="width: 100%; margin-right: 15px;">
              <el-button :disabled="isshow" type="danger" round size="small" style="float: right;" v-show="isdelete == false" @click="show3 = true">报&nbsp;&nbsp;名</el-button>
              <el-button :disabled="isshow" type="danger" round size="small" style="float: right;" v-show="isdelete == true" @click="deleteInfo">删&nbsp;&nbsp;除</el-button>
            </div>
          </div>
          <el-row style="height: 41px;">
            <router-link to='/'>
              <el-col :span="6" class="el"><div class="grid-content iconfont"><span class="ico-info">&#xe603;</span></div></el-col>
            </router-link>
            <router-link to='/lunch'>
              <el-col :span="6" class="el"><div class="grid-content iconfont"><span class="ico-info">&#xe64d;</span></div></el-col>
            </router-link>
             <router-link to='/car'>
              <el-col :span="6" class="el"><div class="grid-content iconfont bg-blue"><span class="ico-info"><el-badge is-dot class="item" v-show="this.carList.length>0">&#xe65e;</el-badge></span></div></el-col>
            </router-link>
            <router-link to='/user'>
              <el-col :span="6" class="el"><div class="grid-content iconfont"><span class="ico-info">&#xe602;</span></div></el-col>
            </router-link>
          </el-row>
        </footer>
        <div style="height: 82px"></div>
      </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    name: 'Car',
    data() {
      return {
        fits: 'contain',
        joinNumber: 1,
        checked: [],
        carList: [],
        isdelete: false,
        show3: false,
        form: {
          name: '',
          telNumber: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 2, max: 4, message: '长度在 2 到 4 个字符', trigger: 'blur' }
          ],
          telNumber: [
            { required: true, message: '请输入电话号码', trigger: 'blur' },
            { min: 11, max: 11, message: '11个字符', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
             alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        })
      },
      deleteInfo() {
        console.log(this.checked.length);
        console.log(this.checked);
      },
      getHomeInfo () {
            axios.get('/static/mock/car.json')
                .then(this.getHomeInfoSucc)
        },
      getHomeInfoSucc (res) {
          res = res.data
          if (res.ret && res.data) {
              const data = res.data
              this.carList = data.carList
          }else {
              alert('数据获取失败')
          }
          //console.log(res)
      },
      handleChange(value) {
        console.log(value);
      }
    },
    computed: {
      isshow() {
        if(this.checked.length) {
          return false;
        }else {
          return true;
        }
      },
      checkAll: {
        get: function() {
          return this.checkedCount == this.carList.length;
        },
        set: function(value) {
          if (value) {
              this.checked = this.carList.map(function(item) {
              return item.activityId
            })
          } else {
            this.checked = []
          }
        }
      },
      checkedCount: {
        get: function() {
            return this.checked.length;
        }
      }
    },
    mounted () {
        this.getHomeInfo()
    }
}
</script>

<style scoped>
  header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    line-height: 2.5rem;
    background: #67C23A;
    text-align: center;
  }
  .car-btn1 {
    color: #fff;
    font-size: 14px;
    float: right;
    padding-right: 8px;
  }
  footer {
    position:fixed;
    bottom:0;
    z-index:9999;
    height: 82px;
    width: 100%;
    background-color: white;
    border-top: 1px solid #eee;
  }
  .el {
    color: black;
  }
  .grid-content {
    text-align: center;
    height: 41px;
    font-size: 30px;
    padding: 3px;
  }
  .ico-info {
    vertical-align: middle;
  }
  .bg-blue {
    color: #409EFF;
  }
  .box-card {
    margin: 5px 10px 5px 7px;
  }
  .username {
    font-size: 12.5px;
    margin: 3px 0 3px 30px;
  }
  .demo-fit {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .activity {
    margin: 5px 0 5px 10px;
  }
  .activity-name {
    line-height: 30px;
    font-size: 13px;
    color: black;
  }
  .tojoin {
    position:fixed;
    bottom:0;
    z-index:999;
    height: 500px;
    width: 100%;
    background-color: white;
  }
  .tocarmask {
    position:fixed;
    bottom:0;
    z-index:900;
    height: 100%;
    width: 100%;
    background-color: #ccc;
    opacity: 0.65;
  }
</style>